@import "../../public.css";
@import url('../../rate-star.css');

.page {
    background    : #F8F8F8;
}

.swapper {
    width : 100%;
    height: 360px;

    .image {
        width : 100%;
        height: 100%;
    }
}

.store {
    background-color: #FFFFFF;
    padding         : 32px 40px;

    .title {
        display        : flex;
        flex-direction : row;
        justify-content: space-between;

        .name {
            font-size  : 32px;
            line-height: 45px;
            font-weight: 600;
            color      : #373737;
        }

        .distance {
            margin-top : 6px;
            font-size  : 24px;
            line-height: 33px;
            color      : #999999;
        }
    }

    .address {
        display       : flex;
        flex-direction: row;
        margin-top    : 12px;

        .icon-left {
            width : 24px;
            height: 24px;
        }

        .text {
            margin-left: 8px;
            width      : 485px;
            font-size  : 24px;
            line-height: 33px;
            color      : #373737;
        }

        .map {
            margin-left: 19px;
            width      : 48px;
            height     : 48px;
        }

        .phone {
            margin-left: 40px;
            width      : 48px;
            height     : 48px;
        }
    }

    .row-score {
        display       : flex;
        flex-direction: row;
        margin-top    : 12px;
        height        : 33px;
        text-align    : center;

        .text {
            margin-top : 8px;
            margin-left: 28px;
            font-size  : 24px;
            line-height: 33px;
            color      : #373737;
        }

        .text2 {
            font-size  : 24px;
            line-height: 33px;
            color      : #999999;
        }
    }
}

.box-service {
    margin-top      : 24px;
    background-color: #FFFFFF;
    padding         : 32px 40px;

    .box-service-title {
        display    : flex;
        align-items: center;

        .icon-appointment {
            width : 38px;
            height: 36px;
        }

        .service-name {
            font-size  : 32px;
            line-height: 45px;
            color      : #504037;
            font-weight: 600;
            margin-left: 12px;
        }
    }



    .item-service {
        margin-top    : 32px;
        display       : flex;
        flex-direction: row;
        position      : relative;

        .img {
            width : 88px;
            height: 88px;
        }

        .name {
            margin-left   : 20px;
            font-size     : 28px;
            vertical-align: text-top;
            color         : #373737;
        }

        .btn-appointment {
            width           : 136px;
            height          : 48px;
            line-height     : 48px;
            background-color: #3F3F3F;
            border-radius   : 24px;
            color           : #FFFFFF;
            font-size       : 22px;
            text-align      : center;
            position        : absolute;
            right           : 0px;
            top             : 25%;
        }
    }

    .text-tip {
        margin-top : 20px;
        font-size  : 24px;
        line-height: 33px;
        color      : #999999;
    }
}

.box-evaluate {
    margin-top      : 24px;
    background-color: #FFFFFF;
    padding         : 32px 40px;

    .box-evaluate-title {
        display    : flex;
        align-items: center;

        .icon-evaluate {
            width : 38px;
            height: 36px;
        }

        .evaluate-name {
            font-size  : 32px;
            line-height: 45px;
            color      : #504037;
            font-weight: 600;
            margin-left: 12px;
        }

        .evaluate-count {
            margin-left: 20px;
            font-size  : 24px;
            line-height: 33px;
            color      : #373737;
        }
    }


}

.box-evaluate-total-score {
    display        : flex;
    flex-direction : row;
    position       : relative;
    justify-content: space-between;
    margin-top     : 32px;

    .box1 {
        .text1 {
            font-size  : 40px;
            line-height: 56px;
            color      : #3F3F3F;
            font-weight: 600;
        }
    }

    .box-right {
        display       : flex;
        flex-direction: row;
    }

    .box2 {
        text-align : center;
        margin-left: 32px;

        .text-top {
            font-size  : 24px;
            line-height: 33px;
            color      : #999999;
        }

        .text-score {
            font-size  : 32px;
            line-height: 45px;
            font-weight: 600;
            color      : #3F3F3F;
        }
    }
}

.box-tag {
    display       : flex;
    margin-top    : 32px;
    flex-direction: row;

    .tag-normal {
        width           : 124px;
        height          : 52px;
        line-height     : 52px;
        border-radius   : 4px;
        text-align      : center;
        background-color: #E4FDFF;
        color           : #08D4D2;
        font-size       : 24px;
        margin-right    : 20px;
    }

    .tag-select {
        width           : 124px;
        height          : 52px;
        background-color: #0BE0DE;
        border-radius   : 4px;
        color           : #FFFFFF;
        font-size       : 24px;
        line-height     : 52px;
        margin-right    : 20px;
        text-align      : center;
    }
}

.evaluate-list {
    background-color: #FFFFFF;
    padding-top     : 8px;
    padding-bottom  : 58px;

}

.box-header {
    display     : flex;
    position    : relative;
    margin-left : 40px;
    margin-right: 40px;
    margin-top  : 24px;
    align-items : center;

    .img-header {
        width        : 68px;
        height       : 68px;
        border-radius: 68px;
    }

    .header-name {
        margin-left: 16px;
        font-size  : 28px;
        line-height: 40px;
        color      : #373737;
    }

    .time {
        position   : absolute;
        right      : 0px;
        top        : 0px;
        font-size  : 24px;
        line-height: 33px;
        color      : #999999;
    }
}

.text-evaluate-content {
    margin-top  : 20px;
    font-size   : 28px;
    line-height : 40px;
    color       : #373737;
    margin-left : 40px;
    margin-right: 40px;
}

.evaluate-list-img-box {
    display     : flex;
    flex-wrap   : wrap;
    margin-left : 40px;
    margin-right: 40px;
}

.evaluate-img {
    width      : 200px;
    height     : 200px;
    margin-left: 20px;
    margin-top : 20px;
}

.evaluate-store-reply-box {
    margin-left     : 40px;
    margin-right    : 40px;
    background-color: #F3FCFD;
    padding-top     : 37px;
    padding-bottom  : 20px;
    padding-left    : 20px;
    padding-right   : 26px;
}

.evaluate-store-reply-name {
    font-size  : 24px;
    line-height: 33px;
    color      : #373737;
}

.evaluate-store-reply-content {
    margin-top : 8px;
    font-size  : 24px;
    line-height: 33px;
    color      : #08D4D2;
}

.evaluate-item-service-name {
    font-size  : 24px;
    line-height: 33px;
    color      : #999999;
    margin-top : 12px;

    .title {
        margin-left: 40px;
    }

    .name {
        margin-left: 20px;
    }
}

.item-divider {
    margin-top      : 24px;
    background-color: #E4E2E1;
    display         : flex;
    margin-left     : 40px;
    margin-right    : 40px;
    height          : 1px;
}

.no-more {
    color        : #08D4D2;
    font-size    : 24px;
    line-height  : 33px;
    margin-top   : 32px;
    text-align   : center;
}